<template>
    <div class="contaier">
        <van-nav-bar title="8天健康养成计划" left-text="" @click-left="onClickLeft" left-arrow sticky>
            <template #right>
                <img src="../../assets/分享.png" alt="" style="width: 30px;height: 30px;">
            </template>
        </van-nav-bar>
        <div>
            <div class="cultiavtion">
                <div class="cult-img">
                    <img src="../../assets/img/养成.png" alt="" />
                </div>
                <van-tabs v-model:active="active" class="act" sticky>
                    <van-tab title="介绍">
                        <div class="cult">
                            <div class="cult-box">
                                <div class="cult-left" style="margin-top: 10px;"> <span
                                        style="color: #39d167;margin-left: 10px;">•</span> 难度系数:
                                </div>
                                <div class="cult-right" style="margin-top: 10px;">
                                    &nbsp; &nbsp;<van-icon name="star" style="color:#ffa800; z-index: 99999;" />
                                    <van-icon name="star" />
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left">
                                    <span style="color: #39d167;margin-left: 10px;">•</span> 适用人群:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 学生党、上班族、久坐族、懒人族以及患<br>&nbsp; &nbsp; 有颈肩腰腿痛的人群
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left"> <span style="color: #39d167;margin-left: 10px;">•</span>
                                    预期效果:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 通过专业精准康复视频训练，让你远离身<br> &nbsp; &nbsp;体酸痛，焕发新活力
                                </div>
                            </div>
                            <div style="border-top: 1px solid #f4f4f4;margin-top: 18px;width: 90%;">
                                <img src="../../assets//222.png" alt=""
                                    style="width: 105%;height: 100%;margin-left: -10px;margin-top: 20px">
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="目录">
                        <div class="day">
                            <div class="day1"><b>共8日</b></div>
                            <div class="day2">
                                <ul>
                                    <li>01日</li>
                                    <li class="hj" v-if="currentDate" style="color: #000;" @click="Todetail">缓解肩颈疲劳酸痛
                                    </li>
                                    <li class="hj" v-else style="color: #ccc;">缓解肩颈疲劳酸痛</li>
                                </ul>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>02日</li>
                                        <li class="hj" v-if="currentDate" style="color: #000;">拯救手腕痛“鼠标手”</li>
                                        <li class="hj" v-else style="color: #ccc;">缓解肩颈疲劳酸痛</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>03日</li>
                                        <li class="hj" style="margin-left: -189px;">缓解腰酸腰痛</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 0.5px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>04日</li>
                                        <li class="hj" style="margin-left: -189px;">改善圆肩驼背</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>05日</li>
                                        <li class="hj" style="margin-left: -210px;">缓解网球肘</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>

                                        <li>06日</li>
                                        <li class="hj" style="margin-left: -200px;">缓解下背疼痛</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>07日</li>
                                        <li class="hj" style="margin-left: -141px;">改善膝关节弹响、疼痛</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>08日</li>
                                        <li class="hj" style="margin-left: -141px;">矫正骨盆前倾、后倾</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                            </div>
                        </div>
                    </van-tab>

                </van-tabs>
            </div>

        </div>
    </div>
    <div>
        <div v-for="(item, index) in list" :key="index">
            {{ item.flag }}
        </div>
        <button style="width: 98%;height: 50px;background-color:#39d167;margin-top: 42px;border: none;
        outline: none;color: white;position: absolute;left: 5px;border-bottom: 0px;" @click="addji"
            v-if="flag == true">加入计划</button>
        <div v-else style="width: 95%;height: 100px;background-color: white;position: fixed;bottom: 0;left: 7px;">
            <button style="width: 45%;height: 50px;background-color:#39d167;margin-top: 40px;border: none; bottom: 5px;
        outline: none;color: white;position: absolute;left: 0px;border-bottom: 0px;">查看今天计划</button>
            <button style="width: 45%;height: 50px;background-color:#ffff;margin-top: 40px;border: 1px solid #70de91 ;color: #39d167;
        outline: none;position: absolute;right: 0px;bottom: 5px;" @click="handlequ">取消计划</button>
        </div>
    </div>

</template>

<script setup lang="ts">
import { showToast } from "vant";
import { ref, computed } from "vue"
import { useRouter, useRoute } from "vue-router";
//  const todays = ref(false);
const router = useRouter();
const active = ref(0);
// const addJi = <any>ref('')
const flag = ref<any>(false)
const list = ref<any>([])
import axios from "axios";
const getlist = async () => {
    await axios.get('/addres/goodVideo').then(res => {
        console.log(res)
        list.value = res.data.data
        console.log(list.value)
    }).catch(err => {
        console.log(err)
    })
}
getlist()

const onClickLeft = () => {
    router.push({ path: "/jiankang" })
}
// 获取当天时间
const currentDate = ref(new Date());
console.log(currentDate.value);

const addji = () => {
    flag.value = true ;
    console.log("加入计划");
    localStorage.setItem("jiankang", JSON.stringify( flag.value))
    showToast("加入成功");
}
const handlequ = () => {
   flag.value = !false
    showToast("取消成功");
    localStorage.setItem("jiankang", JSON.stringify( flag.value ))
}
const Todetail = () => {
    router.push({ path: "/Todetail" })
}
                               

</script>

<style lang="scss" scoped>
:deep(.van-icon) {
    color: #000 !important
    // color: #63c38a !important
}

.cultiavtion {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .cult-img {
        width: 100%;
        height: 150px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .cult {
        .cult-box {
            width: 120%;
            height: 50px;
        }

        .cult-left {
            float: left;
            height: 40px;
            text-align: center;
            padding-top: 10px;
        }

        .cult-right {
            float: left;
            height: 40px;
            width: 70%;
            text-align: left;
            padding-top: 10px;
        }
    }
}

[data-v-ca42e025] .van-icon {
    color: #ffa800 !important;
}

:deep(.van-tabs__line) {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    background: #39d167;
    border-radius: var(--van-tabs-bottom-bar-height);
}

.day {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-left: 15px;

    .day1 {
        width: 100%;
        height: 30px;
        font-size: 19px;
        margin-left: 1px;
    }

    .day2 {
        width: 100%;
        height: 480px;
        margin-top: 15px;
        overflow-y: scroll;

        ul {
            height: 50px;
            display: flex;
            justify-items: center;

            li {
                color: #a7a7a7;
                margin-left: 1px;
            }

            .hj {
                margin-left: -150px;
            }
        }
    }
}
</style>
